<template>
  <div class="blog-sidebar">
    <div class="sidebar-widget">
      <h3 class="widget-title">关于我</h3>
      <div class="widget-content">
        <p>Android开发工程师，专注于移动应用开发和用户体验优化。</p>
        <p>分享Android开发技巧、最佳实践和最新技术动态。</p>
      </div>
    </div>
    
    <div class="sidebar-widget">
      <h3 class="widget-title">分类</h3>
      <ul class="category-list">
        <li v-for="category in categories" :key="category.name" class="category-item">
          <a href="#" class="category-link">{{ category.name }}</a>
          <span class="category-count">({{ category.count }})</span>
        </li>
      </ul>
    </div>
    
    <div class="sidebar-widget">
      <h3 class="widget-title">热门标签</h3>
      <div class="tag-cloud">
        <a v-for="tag in tags" :key="tag" href="#" class="tag-cloud-link">{{ tag }}</a>
      </div>
    </div>
    
    <div class="sidebar-widget">
      <h3 class="widget-title">最新文章</h3>
      <ul class="recent-posts">
        <li v-for="post in recentPosts" :key="post.id" class="recent-post-item">
          <a href="#" class="recent-post-link">{{ post.title }}</a>
          <span class="recent-post-date">{{ post.date }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const categories = [
  { name: 'Android基础', count: 12 },
  { name: 'Kotlin', count: 8 },
  { name: 'Jetpack', count: 15 },
  { name: '性能优化', count: 7 },
  { name: '架构设计', count: 10 }
]

const tags = [
  'Android', 'Kotlin', 'Jetpack Compose', 'MVVM', 'Room', 
  'Retrofit', '协程', '性能优化', '架构', '源码分析'
]

const recentPosts = [
  { id: 1, title: 'Android 15新特性详解', date: '2025-09-25' },
  { id: 2, title: '使用Kotlin Flow优化数据流处理', date: '2025-09-20' },
  { id: 3, title: '深入理解Jetpack Compose的重组机制', date: '2025-09-15' },
  { id: 4, title: 'Android性能优化实战：内存泄漏检测与修复', date: '2025-09-10' }
]
</script>

<style scoped>
.blog-sidebar {
  background: var(--color-background-soft);
  border-radius: 8px;
  padding: 1.5rem;
  position: sticky;
  top: 80px;
}

.sidebar-widget {
  margin-bottom: 2rem;
}

.sidebar-widget:last-child {
  margin-bottom: 0;
}

.widget-title {
  font-size: 1.2rem;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
}

.widget-content p {
  line-height: 1.6;
  margin: 0.5rem 0;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  padding: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-hover);
}

.category-item:last-child {
  border-bottom: none;
}

.category-link {
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.3s;
}

.category-link:hover {
  color: #42b883;
}

.category-count {
  color: var(--color-text);
  opacity: 0.7;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud-link {
  text-decoration: none;
  color: var(--color-text);
  background: #e0f0e9;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.tag-cloud-link:hover {
  background: #42b883;
  color: white;
}

.recent-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-post-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-hover);
}

.recent-post-item:last-child {
  border-bottom: none;
}

.recent-post-link {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  transition: color 0.3s;
}

.recent-post-link:hover {
  color: #42b883;
}

.recent-post-date {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.7;
  margin-top: 0.2rem;
}
</style>